<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>城市月平均气温柱状图</title>
    <script src="js/echarts.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>

<body>
<div id="main" style="width: 800px; height: 600px;"></div>
<script>
    const myChart = echarts.init(document.getElementById('main'));

    axios.get('http://localhost:8080/cdt/select')
        .then(res => {
            const { city, month, avg } = res.data;
            const data = [];
            for (let i = 0; i < city.length; i++) {
                data.push({
                    city_name: city[i],
                    month: month[i],
                    avg_temperature: avg[i]
                });
            }

            const cities = [];
            const months = [];

            data.forEach(item => {
                if (!cities.includes(item.city_name)) {
                    cities.push(item.city_name);
                }
                if (!months.includes(item.month)) {
                    months.push(item.month);
                }
            });

            const series = [];
            months.forEach((month, index) => {
                const seriesData = [];
                cities.forEach(city => {
                    const target = data.find(d => d.city_name === city && d.month === month);
                    if (target) {
                        seriesData.push(target.avg_temperature);
                    } else {
                        seriesData.push(0);
                    }
                });
                series.push({
                    name: month,
                    type: 'bar',
                    data: seriesData
                });
            });

            const option = {
                title: {
                    text: '城市月平均气温柱状图'
                },
                tooltip: {},
                legend: {
                    data: months
                },
                xAxis: {
                    data: cities
                },
                yAxis: {
                    name: '温度'
                },
                series: series
            };

            myChart.setOption(option);
        })
        .catch(error => {
            console.error('数据获取失败:', error);
        });
</script>
</body>

</html>